<template>
  <div class="container">
    <div class="title">
      <span>利润表</span>
      <el-date-picker
        v-model="monthRange"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        value-format="YYYY-MM"
        @change="getProfit"
      >
      </el-date-picker>
    </div>
    <div v-for="item in monthEve" :key="item.keyMonth">
      <span class="tableTitle">{{ item.keyMonth }}</span>
      <el-table
        :data="item.keyData"
        row-key="profit_id"
        border
        stripe
        height="780"
      >
        <el-table-column prop="project_name" label="项目" width="500">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
            >
              {{ scope.row.project_name }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="line_number"
          label="行次"
          width="180px"
          align="center"
        />
        <el-table-column
          prop="current_year_cumulative_amout"
          label="本年累计金额"
          align="center"
        /><el-table-column
          prop="current_month_cumulative_amout"
          label="本月金额"
          align="center"
        />
      </el-table>
    </div>
    <div class="abow_dialog1">
      <el-dialog v-model="show" :title="`${project_name}-详情`">
        <el-table :data="girdData" border max-height="500">
          <el-table-column
            prop="account_code"
            label="科目代码"
            max-width="170"
            align="center"
          /><el-table-column
            prop="account_name"
            label="科目名称"
            align="center"
            max-width="170"
          />
          <el-table-column
            prop="period"
            label="日期"
            max-width="170"
            align="center"
          /><el-table-column
            prop="voucher_number"
            label="凭证号"
            max-width="170"
            align="center"
          >
            <template #default="scope">
              <el-button
                type="text"
                size="small"
                @click="handleEdit2(scope.$index, scope.row)"
              >
                {{ scope.row.voucher_number }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="summary"
            label="摘要"
            max-width="170"
            align="center"
          /><el-table-column
            prop="debit_amount"
            label="借方"
            max-width="170"
            align="center"
          /><el-table-column
            prop="credit_amount"
            label="贷方"
            max-width="170"
            align="center"
          /><el-table-column
            prop="direction"
            label="方向"
            max-width="170"
            align="center"
          /><el-table-column
            prop="balance"
            label="余额"
            max-width="170"
            align="center"
          />
        </el-table>
      </el-dialog>
    </div>
    <div class="abow_dialog">
      <el-dialog v-model="dialogVisible" width="80%">
        <iframe
          id="myIframe"
          :src="iframeSrc"
          width="100%"
          height="800vh"
        ></iframe>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { getProfitList, getMore, getPdf } from "@/api/getList";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const page = ref("");
const router = useRouter();
const route = useRoute();
const monthRange = ref([]);
const monthEve = ref([]);
const tableData = ref();
const show = ref(false);
const girdData = ref([]);
const project_name = ref("");
const iframeSrc = ref("");
const dialogVisible = ref(false);
monthRange.value[0] = history.state.startMonth;
monthRange.value[1] = history.state.endMonth;
const getProfit = () => {
  getProfitList({
    start_month: monthRange.value[0],
    end_month: monthRange.value[1],
  }).then((res) => {
    if (Object.keys(res.data).length === 0) {
      ElMessage.error("文件不存在，请上传！");
    } else {
      monthEve.value = [];
      for (const key in res.data) {
        monthEve.value.push({
          keyMonth: key,
          keyData: res.data[key],
        });
      }
    }
  });
};
const handleEdit = (a, b) => {
  getMore({
    account_code: b.account_code,
    target: 4,
    month: b.period,
  }).then((res) => {
    if (res.data.length > 0) {
      girdData.value = res.data;
      show.value = true;
      project_name.value = b.project_name;
    }
  });
};
const handleEdit2 = (a, b) => {
  page.value = b.voucher_paging?.split(",")[0];
  const data = {
    file_type: 6,
    file_month: b.period.slice(0, 7),
  };
  getPdf(data).then((res) => {
    if (res.result === "fail") {
      ElMessage.error("缺少凭证，请上传！");
    } else {
      iframeSrc.value =
        `../src/static/pdfjs/web/viewer.html?file=` +
        res.data.url +
        `#page=${page.value}`;
      dialogVisible.value = true;
    }
  });
};
onMounted(() => {
  getProfit();
});
</script>

<style lang="less" scoped>
.container {
  height: calc(100vh - 142px);
  background: @mainColor;

  .title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  span {
    margin: 1vw;
  }
}
.abow_dialog /deep/ .el-dialog {
  margin-top: 6vh;
  height: 90%;
  overflow: hidden;
  .el-dialog__body {
    position: absolute;
    left: 0;
    top: 54px;
    bottom: 0;
    right: 0;
    padding: 0;
    z-index: 1;
    overflow: hidden;
    overflow-y: auto;
  }
}
.tableTitle {
  display: inline-block;
  margin: 1vh;
  font-size: 1.2vw;
}
:deep(.title) {
  width: 25vw;
}
</style>
